<template>
    <div>
        <el-card shadow="hover">
            <div class="title">
                <span>第1场周赛</span>
                <el-button type="primary" size="medium">报名</el-button>
            </div>
            <el-tabs v-model="activeNum">
                <el-tab-pane label="详情" name="1">
                    <Introduce></Introduce>
                </el-tab-pane>
                <el-tab-pane label="题目" name="2">
                    <List></List>
                </el-tab-pane>
                <el-tab-pane label="排行" name="3">
                    <Rank></Rank>
                </el-tab-pane>
                <el-tab-pane label="记录" name="4">
                    <Record></Record>
                </el-tab-pane>
                <el-tab-pane label="讨论" name="5">

                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import Introduce from './introduction'
import List from './list'
import Rank from './rank'
import Record from './record'

export default {
    name: "competition-item",
    data() {
        return {
            activeNum: "1"
        }
    },
    components: {
        Introduce,
        List,
        Rank,
        Record
    }
}
</script>

<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}

::v-deep .el-tabs__item {
    font-size: 16px;
}

</style>